<template>
<div>
  <el-table
    :data="depManageList"
    style="width: 100%;margin-bottom: 20px;"
    row-key="depId"
    border
    default-expand-all
    :tree-props="{children: 'children'}">
    <el-table-column
      prop="depName"
      label="部门名称"
      width="180">
    </el-table-column>
<!--    <el-table-column prop="depState"  label="部门状态"  width="180">-->
<!--    </el-table-column>-->
    <el-table-column width="180" label="部门状态" align="center" prop="depState"
                     :filters="[{ text: '启用', value: '启用' }, { text: '故障', value: '故障' }]"
                     :filter-method="filterwState"
                     filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.depState === '启用' ? 'primary' : 'danger'"
          disable-transitions>{{scope.row.depState}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="depCreateTime"
      label="创建时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="createBy"
      label="创建人"
      width="180">
    </el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          v-if="scope.$index != 0"
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
        >修改
        </el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-plus"
          @click="handleAdd(scope.row)"
        >新增
        </el-button>
        <el-button
          v-if="scope.$index != 0"
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
<!--新增或修改对话框  -->
  <el-dialog :title="title"  :visible.sync="dialogFormVisible" width="45%">
    <el-form :model="depManage" :rules="depManageRules" ref="depManageRulesForm">
      <el-form-item label="车间" prop="depName">
        <el-input v-model="depManage.depName" autocomplete="off" style="width:200px"></el-input>
      </el-form-item>
          <el-form-item label="启用状态" prop="depState">
            <el-radio-group v-model="depManage.depState">
              <el-radio label="启用">启用</el-radio>
              <el-radio label="故障">故障</el-radio>
            </el-radio-group>
          </el-form-item>
      <el-form-item label="负责人" prop="createBy">
        <el-input v-model="depManage.createBy" autocomplete="off" style="width:200px"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="okdepManage('depManageRulesForm')">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {getList,addDep,editDep,hasChildren,del} from "@/api/set_dep";

export default {
  data() {
    return {
      depManageList:[],
      //对话框的开关
      dialogFormVisible:false,
      //对话框标题
      title:"",
      //删除的id
      depId:null,
      //对话框数据
      depManage:{
        depName:null,
        depState:null,
        parentDepId:null,
        createBy:null,
      },
      //表单校验
      depManageRules:{
        depName:[
          { required: true, message: '分类名称不能为空', trigger: 'blur' },
        ],
        depState:[
          { required: true, message: '显示排序不能为空', trigger: 'blur' },
        ],
        createBy:[
          { required: true, message: '显示排序不能为空', trigger: 'blur' },
        ]
      },
    }
  },
  methods: {
    fetchData(){
      getList().then(res=>{
      console.log(res.data)
        this.depManageList = res.data
      })

    },
    //w_state的显示
    filterwState(value, row) {
      return row.depState === value;
    },
    //点击新增按钮
    handleAdd(row ){
      this.depManage = {}
      this.title = "添加"
      this.dialogFormVisible = true;
      this.depManage.parentDepId = row.depId
    },
    //打开修改对话框
    handleUpdate(row ){
      this.title = "修改";
      this.dialogFormVisible = true;
      this.depManage = row
    },
    //确定对话框按钮
    okdepManage(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.title == "添加"){
            console.log("=======",this.depManage)
            addDep(this.depManage).then(res => {
              this.$message({
                type: 'success',
                message: '添加成功'
              });
              this.fetchData();
              this.dialogFormVisible = false;
            })
          }else{
            editDep(this.depManage).then(res =>{
              this.dialogFormVisible = false;
              this.fetchData();
            })
          }

        } else {
          console.log('error submit!!');
          this.dialogFormVisible = false;
          return false;
        }
      });

    },
    //单个删除
    handleDelete(row){
      console.log("=============",row)
      this.$confirm('是否确认删除单位编号为 "' + row.depName + '" 的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      //判断是否有孩子
        hasChildren({id:row.depId}).then(res=>{
          if (res.data){
            this.$message({
              type: 'error',
              message: '删除失败，请先删除分类车间'
            });
          }else {
            del({id:row.depId}).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              this.fetchData();
            })
          }
        })

      })
    }


  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped >

</style>
